<template>
  <div class="page-template-manage">
<!--    <Spin fix v-show="loading">
      <Icon type="ios-loading" size=18 class="spin-icon-load"></Icon>
      <div>加载中，请耐心等待...</div>
    </Spin>-->
    <div style="width: 100%;">
      <Button class="m-r-5px" type="primary" @click="importPageTemplateModalVisible = !importPageTemplateModalVisible">
        <Icon custom="iconfont icon-import-page" size="16"/>
        导入模板
      </Button>

      <Tooltip placement="top" content="刷新数据">
        <Button type="primary" @click="loadPageTemplates">
          <Icon type="md-refresh"/>
        </Button>
      </Tooltip>

      <div class="float-right">
        <Input v-model="searchFormData.name" class="m-r-5px" style="width: 250px;" placeholder="模板名称" @on-enter="loadPageTemplates"/>
        <Button class="m-r-5px" @click="loadPageTemplates">
          <Icon type="md-search"/>
          搜索
        </Button>
        <Button @click="clearSearch">清空</Button>
      </div>
      <div class="clearfix"></div>
    </div>

    <div class="m-b-10px"></div>

    <div class="page-container">
      <Row :gutter="15">
        <i-col v-for="pageTemplate in tableData" :key="pageTemplate.id" :xs="24" :sm="12" :md="12" :xl="6" :xxl="4">
          <div class="page-card">
            <div class="img-wrap">
              <img v-if="pageTemplate.thumbnail" class="page-thumbnail"
                   :src="$PnUtil.buildImageSrc(pageTemplate.thumbnail)"/>
              <Icon v-else class="default-img-icon"
                    :custom="developCanvasIcon(pageTemplate.develop_canvas)"/>
              <div v-if="pageTemplate.thumbnail" class="layout-type">
                <Tooltip :content="developCanvasName(pageTemplate.develop_canvas)"
                         placement="left">
                  <Icon
                      :custom="developCanvasIcon(pageTemplate.develop_canvas)"/>
                </Tooltip>
              </div>
              <div class="operation-wrap">
                <p style="font-size: 14px;">{{pageTemplate.create_date}}</p>
                <div class="operation-btns-wrap">
                  <Tooltip content="导出" placement="top">
                    <a href="javascript:;" @click="exportPageTemplate(pageTemplate.id)">
                      <Icon custom="iconfont icon-download" size="18"/>
                    </a>
                  </Tooltip>
                  <Tooltip :content="pageTemplate.enabled == '1' ? '禁用':'启用'" placement="top">
                    <a href="javascript:;" @click="toggleEnabled(pageTemplate.id)">
                      <Icon :type="pageTemplate.enabled == '1' ? 'md-remove-circle':'md-checkmark-circle'" size="18" style="top: 3px;"/>
                    </a>
                  </Tooltip>
                  <Tooltip content="删除" placement="top">
                    <a href="javascript:;" @click="deletePageTemplate(pageTemplate.id)">
                      <Icon type="md-trash" size="18" style="top: 3px;"/>
                    </a>
                  </Tooltip>
                </div>
              </div>
            </div>
            <div class="footer">
              <p class="float-left" :title="pageTemplate.name">
                {{ $PnUtil.cutString(pageTemplate.name, 10) }}
              </p>
              <p class="float-right">
                <Icon type="ios-radio-button-on" :style="{color: pageTemplate.enabled == '1' ? '#4caf50':'#9e9e9e'}"/>
                {{ pageTemplate.enabled == '1' ? '已激活' : '未激活' }}
              </p>
              <div class="clearfix"></div>
            </div>
          </div>
        </i-col>
      </Row>
      <div class="none-alert" v-if="tableData.length == 0">
        <Icon type="ios-alert-outline" size="150"/>
        <p>找不到相关页面模板数据</p>
      </div>
    </div>

    <Divider :style="{marginTop: '0px', marginBottom: '10px'}"/>
    <Page size="small" class="float-right" :total="pageTotal" :current.sync="pageIndex" :page-size="pageSize"
          show-elevator show-total @on-change="loadPageTemplates">
    </Page>

    <Modal
        v-model="importPageTemplateModalVisible"
        title="导入模板"
        :footer-hide="true">
      <ImportPageTemplate @upload-success="importTemplateSuccessHandle"></ImportPageTemplate>
    </Modal>

  </div>
</template>

<script>

import ManageMixin from '../../../../mixin/ManageMixin'
import ImportPageTemplate from "./ImportPageTemplate";

export default {
  name: 'PageTemplateManage',
  components: {ImportPageTemplate},
  mixins: [ManageMixin],
  data() {
    return {
      loading: false,
      importPageTemplateModalVisible: false,
      searchFormData: {
        name: ''
      }
    }
  },
  mounted() {
    this.loadPageTemplates()
  },
  methods: {
    developCanvasIcon(develop_canvas) {
      switch (develop_canvas) {
        case 'AbsoluteLayoutCanvas':
          return 'iconfont icon-absolute-layout'
        case 'ReactiveLayoutCanvas':
          return 'iconfont icon-reactive-layout'
        case 'FormLayoutCanvas':
          return 'iconfont icon-form-layout'
      }
      return ''
    },

    developCanvasName(develop_canvas) {
      switch (develop_canvas) {
        case 'AbsoluteLayoutCanvas':
          return '绝对布局'
        case 'ReactiveLayoutCanvas':
          return '响应式栅格布局'
        case 'FormLayoutCanvas':
          return '表单布局'
      }
      return ''
    },

    loadPageTemplates() {
      this.loading = true
      this.$PnApi.PageTemplateApi.getPageTemplateByPage(this.pageIndex, this.pageSize, this.searchFormData.name).then(result => {
        this.tableData = result.data.payload.list;
        this.pageTotal = result.data.payload.total;
        this.loading = false
      })
    },

    toggleEnabled(id) {
      this.$PnApi.PageTemplateApi.toggleEnabled(id).then(result => {
        if (result.data.success) {
          this.$Message.success(result.data.message);
          this.loadPageTemplates();
        }else {
          this.$Message.error(result.data.message);
        }
      })
    },

    deletePageTemplate(id) {
      this.$Modal.confirm({
        title: '提醒',
        content: '您确定要删除此项吗？',
        onOk: () => {
          this.$PnApi.PageTemplateApi.deletePageTemplate(id).then(result => {
            if (result.data.success) {
              this.loadPageTemplates();
              this.$Message.success(result.data.message)
            } else {
              this.$Message.error(result.data.message)
            }
          });
        }
      });
    },

    importTemplateSuccessHandle() {
      this.importPageTemplateModalVisible = !this.importPageTemplateModalVisible;
      this.loadPageTemplates()
    },

    exportPageTemplate(pageTemplateId) {
      this.$Modal.confirm({
        title: '确认',
        content: '特别提醒：不要修改导出的文件的文件名，否则将无法在导入时正常进行解析',
        onOk: () => {
          let url = window.g.AXIOS_BASE_URL + '/pageTemplate/exportTemplate?pageTemplateId=' + pageTemplateId;
          this.$PnUtil.asyncHref(url, 'pageTemplate_' + pageTemplateId)
        }
      });
    },

    clearSearch() {
      this.searchFormData.name = ''
      this.loadPageTemplates()
    },
  },
  computed: {}
}
</script>

<style lang="less" scoped>

.page-container {
  .page-card {
    width: 100%;
    border: 2px solid #424242;
    border-radius: 8px;
    background-color: #424242;
    position: relative;
    margin-bottom: 15px;

    &:hover {
      border-color: #2196f3;
      box-shadow: 2px 1px 20px #212121;
    }

    &:hover .img-wrap .operation-wrap {
      display: block;
    }

    .img-wrap {
      width: 100%;
      height: 140px;
      background-color: #212121;
      position: relative;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      padding: 10px;

      .default-img-icon {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        font-size: 80px;
        background-image: -webkit-gradient(linear, left top, left bottom, from(0deg), color-stop(#bbdefb), to(#2196f3));
        background-image: linear-gradient(0deg, #2196f3, #bbdefb);
        -webkit-background-clip: text;
        color: transparent;
      }

      .page-thumbnail {
        width: 100%;
        height: 100%;
        border-radius: 8px;
      }

      .layout-type {
        position: absolute;
        left: 0px;
        bottom: 0px;
        padding: 0px 8px 3px 8px;
        background-color: #212121;
        font-size: 14px;
        border-top: 2px solid #424242;
        border-right: 2px solid #424242;
        border-top-right-radius: 5px;
        z-index: 1;
      }

      .operation-wrap {
        display: none;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        background-color: rgba(0, 0, 0, 0.8);
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        padding: 35px 30px 30px 30px;
        text-align: center;

        .operation-btns-wrap {
          margin-top: 20px;

          .ivu-tooltip {
            &:first-child {
              margin-left: 0px;
            }

            margin-left: 10px;

            a {
              color: #fff;
              i {
                position: relative;
              }

              &:hover {
                color: #2196f3;
              }
            }
          }
        }
      }
    }

    .footer {
      width: 100%;
      background-color: #424242;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      padding: 12px 8px 12px 8px;
      position: relative;

      p {
        font-size: 13px;
      }
    }
  }
}

.spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}

@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
